<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>电子档案管理系统</title>
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="bootstrap-3.3.4/dist/css/bootstrap.min.css">

		<style>
		body{
			background: url("images/4.jpg") no-repeat fixed;
		}
		button {
			border: none;
			padding: 0.6em 1.2em;
			background: rgba(0,0,0,0);
			color: #fff;
			font-family: 'Lato', Calibri, Arial, sans-serif;
			font-size: 1em;
			letter-spacing: 1px;
			text-transform: uppercase;
			cursor: pointer;
			display: block;
			border-radius: 2px;
			line-height: 20px;
			margin-top: 8px;
		}
		button:hover {
			background:rgba(0,0,0,0);
		}
		button:focus,button:visited{
			border:none;
		}
		.navbar{
			margin-bottom: 0;
			/*background: rgba(39,134,180,0.1);*/
			background: rgba(0,0,0,0.7);
			/*box-shadow: 1px 1px 5px rgba(39,134,150,1);*/
		}
		.st-container{
			max-height: 654px;	
			box-sizing:border-box;
			background: rgba(0,0,0,0.7);

		}
		
		.navbar-brand{
			color: #fff;
		}
		#logo{
			font-size: 20px;
			font-weight: 500;
		}
		.secondmenu li{
			background: rgba(85,155,180,0.1);
		}
		.tab-pane,
		 .tab-pane h2,
		 .tab-pane label{
      		color:  rgba(85,155,180,1);
      		font-weight: 700;
      		text-shadow:1 1 1px rgba(0,0,0,1);
    	}
		</style>
		<script src="js/jquery-1.11.3.js"></script>
		<script src="js/modernizr.custom.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".secondmenu li i").hide();
			$(".secondmenu li").hover(function(){
				$(this).find("i").show(100);
			},function(){
				$(this).find("i").hide(100);
			});
		})
		</script>
	</head>
	<body>
		<div class="navbar navbar-static-top nav-stacked" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header ">  
               <a class="navbar-brand" href="#mainPage" id="logo" role="tab" data-toggle="tab">电子档案管理系统</a>	
            </div>
            <button data-effect="st-effect-1" id="main-menu">Menu<i class="fa fa-fw fa-reorder"></i></button>
        </div>
		</div>
		<div id="st-container" class="st-container" >		
			<nav class="st-menu st-effect-1" id="menu-1" >
				<ul>
					<li>
						<a class="icon icon-data nav-header collapsed" href="#systemManage" data-toggle="collapse"><h4>档案管理模块</h4></a>
						 <ul id="systemManage" class="nav nav-list collapse secondmenu" style="height: 0px;">
                            <li>
                            	<a href="#getInfo" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-download-alt"></i>&nbsp;&nbsp;&nbsp;&nbsp;采集整理</a>
                            </li>

                            <li>
                            	<a href="#guiDang" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;&nbsp;&nbsp;归档管理</a>
                            </li>

                            <li>
                            	<a href="#chanManage" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon  glyphicon-edit"></i>&nbsp;&nbsp;&nbsp;&nbsp;变更管理</a>
                            </li>

                            <li>
                            	<a href="#borrowManage" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-eye-open"></i>&nbsp;&nbsp;&nbsp;&nbsp;借阅管理</a>
                            </li>

                            <li>
                           		<a href="#destroyManage" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-trash"></i>&nbsp;&nbsp;&nbsp;&nbsp;销毁管理</a>
                            </li>

                        </ul>
					</li>
					<li>
						<a class="icon icon-location nav-header collapsed" href="#systemBorrow" data-toggle="collapse"><h4>借阅模块</h4></a>
						<ul id="systemBorrow" class="nav nav-list collapse secondmenu" style="height: 0px;">
                            <li>
                            	<a href="#Apply" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-calendar"></i>&nbsp;&nbsp;&nbsp;&nbsp;预约</a>
                            </li>
                            <li>
                            	<a href="#Check" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;&nbsp;&nbsp;查看</a>
                            </li>
                            <li>
                            	<a href="#Return" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-share-alt"></i>&nbsp;&nbsp;&nbsp;&nbsp;归还</a>
                            </li>
                            <li>
                            	<a href="#Delay" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-time"></i>&nbsp;&nbsp;&nbsp;&nbsp;延期</a>
                            </li>
                           
                        </ul>
					</li>
					<li>
						<a class="icon icon-study nav-header collapsed" href="#systemSearch" data-toggle="collapse"><h4>查询与统计模块</h4></a>
						<ul id="systemSearch" class="nav nav-list collapse secondmenu" style="height: 0px;">
                            <li>
                            	<a href="#fileCheck" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-folder-open"></i>&nbsp;&nbsp;&nbsp;&nbsp;档案查询</a>
                            </li>
                            <li>
                            	<a href="#dataCount" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-faw fa-bar-chart"></i>&nbsp;&nbsp;&nbsp;&nbsp;数据统计</a>
                            </li>
                           
                        </ul>
					</li>
					<li>
						<a class="icon icon-photo nav-header collapsed" href="#systemSetting" data-toggle="collapse"><h4>系统管理模块</h4></a>
						<ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
                            <li>
                            	<a href="#juese" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;&nbsp;&nbsp;角色管理</a>
                            </li>
                            <li>
                            	<a href="#quanxian" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-bookmark"></i>&nbsp;&nbsp;&nbsp;&nbsp;权限管理</a>
                            </li>
                            <li>
                            	<a href="#userManage" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;&nbsp;&nbsp;用户管理</a>
                            </li>
                            <li>
                            	<a href="#userGoup" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-fw fa-group"></i>&nbsp;&nbsp;&nbsp;&nbsp;用户组管理</a>
                            </li>
                            <li>
                            	<a href="#diaryManage" role="tab" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;<i class="glyphicon glyphicon-book"></i>&nbsp;&nbsp;&nbsp;&nbsp;日志管理</a>
                            </li>
                        </ul>
					</li>
					
				</ul>
			</nav>
		<div class="tab-content container col-md-9 col-md-offset-3" >
			<div class="tab-pane" id="mainPage">
				<h2>Welcome to 电子档案管理系统</h2>

			</div>
			<div class="tab-pane" id="getInfo">
				<h2>采集整理（对所有用户开放）</h2>
				<div>
					
				</div>
			</div>
			<div class="tab-pane" id="guiDang">
				<h2>归档管理（对各部门的档案管理员开放）</h2>
			
			</div>
			<div class="tab-pane" id="chanManage">
				<h2>变更管理（对档案所属用户开放）</h2>
				
			</div>
			<div class="tab-pane" id="borrowManage">
				<h2>借阅管理（对档案归属部门的档案管理员开放）</h2>
				
			</div>
			<div class="tab-pane" id="destroyManage">
				<h2>销毁整理</h2>
			</div>
			<div class="tab-pane" id="Apply">
				<h2>预约</h2>
			</div>
			<div class="tab-pane" id="Check">
				<h2>查看</h2>
			</div>
			<div class="tab-pane" id="Return">
				<h2>归还</h2>
			</div>
			<div class="tab-pane" id="Delay">
				<h2>延期</h2>
			</div>
			<div class="tab-pane" id="fileCheck">
				<h2>档案查询</h2>
			</div>
			<div class="tab-pane" id="dataCount">
				<h2>数据统计</h2>
			</div>
			<div class="tab-pane" id="juese">
				<h2>角色管理</h2>
			</div>
			<div class="tab-pane" id="quanxian">
				<h2>权限管理</h2>
			</div>
			<div class="tab-pane" id="userManage">
				<h2>用户管理</h2>
			</div>
			<div class="tab-pane" id="userGoup">
				<h2>用户组管理</h2>
			</div>
			<div class="tab-pane" id="diaryManage">
				<h2>日志管理</h2>
			</div>
		</div>
		
		<script src="js/classie.js"></script>
		<script src="js/sidebarEffects.js"></script>
		<script src="js/jquery-1.11.3.js"></script>
		<script src="bootstrap-3.3.4\dist\js\bootstrap.min.js"></script> 
	</body>
</html>